<template>
  <div>
    <el-dialog title="详细信息" :visible.sync="UserInfodialogTableVisible">
      <el-descriptions class="margin-top" :column="2" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            姓名
          </template>
          {{ formLabelAlign.stuName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            性别
          </template>
          {{ formLabelAlign?.stuSex == 1 ? "男" : "女" }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            学号
          </template>
          {{ formLabelAlign.stuNum }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            年纪
          </template>
          {{ formLabelAlign.stuGrade }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            校区
          </template>
          {{ formLabelAlign?.stuAddress }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            专业
          </template>
          {{ formLabelAlign?.stuMajor }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            电话
          </template>
          {{ formLabelAlign?.stuPhone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            自我危险状态
          </template>
          {{ formLabelAlign.stuSelfcrisis }}
        </el-descriptions-item>
      </el-descriptions>

      <!-- <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              初访老师
            </template>
            {{ initiaByone.visitTeacher }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              问卷评分
            </template>
            {{ initiaByone.visitCrisisGrades }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              详细描述
            </template>
            {{ initiaByone.userCrisisText }}
          </el-descriptions-item>
        </el-descriptions> -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="UserInfodialogTableVisible = false">确定</el-button>
        <!-- <el-button type="primary">审核</el-button> -->
      </div>
    </el-dialog>
    <div style="margin: 15px 0"></div>
    <!-- 面包屑导航区域 -->
    <!-- <BRED></BRED> -->
    <!-- 卡片视图区域 -->
    <el-card class="box-card">
      <!-- 用户详细信息 -->

      <!-- 搜索与添加区域 -->
      <!-- Layout布局 - > 混合布局
             :gutter="20" 两个格子之间的间隔
          -->
      <el-row :gutter="10">
        <el-col :span="7">
          <!-- Input输入框 - > 复合型输入框 -->
          <el-input placeholder="输入学生姓名/学号/专业/年级/校区查询" 
          @keyup.enter.native="SelectUser"
          v-model="select">
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="SelectUser"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="dialogVisible = true"
            >添加用户</el-button
          >
        </el-col>
        <el-col :span="5">
          <el-dropdown>
            <el-button type="primary" style="margin-left: 580px">
              操作<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                @click.native="dropdown(item)"
                v-for="(item, index) in drowStatus"
                :key="index"
                >{{ item.lable }}</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown></el-col
        >
        <el-col :span="7">
          <el-button
            type="primary"
            class="el-icon-refresh-left"
            @click="refresh"
            style="margin-left: 370px"
          ></el-button
        ></el-col>
      </el-row>

      <el-table
        :data="sysUserList"
        border
        style="width: 100%"
        ref="multipleTable"
        @select="onTableSelect"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          :selectable="selectable"
          align="center"
          type="selection"
          width="60"
        >
        </el-table-column>

        <el-table-column
          prop="stuId"
          label="id"
          width="50"
          align="center"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="stuNum"
          label="学生学号"
          width="140px"
        ></el-table-column>
        <el-table-column
          align="center"
          width="120px"
          prop="stuName"
          label="学生姓名"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="stuAge"
          label="年龄"
          v-if="false"
        ></el-table-column>
        <el-table-column prop="stuSex" label="性别" width="80px" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.stuSex == 1">男</span>
            <span v-if="scope.row.stuSex == 0">女</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="stuAddress"
          label="所在校区"
          width="120px"
          align="center"
        ></el-table-column>
 
          <el-table-column
          prop="stuMajor"
          label="专业"
          width="120px"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="stuGrade"
          label="年级"
          width="80px"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="stuPhone"
          label="电话"
          width="140px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="stuPassword"
          label="密码"
          width="110px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="stuSelfcrisis"
          label="自我危险状态"
          width="120px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="create_date"
          label="创建时间"
          width="160px"
          align="center"
        >
          <template slot-scope="scope">
            {{ $formatDate(scope.row.create_date) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="updateTime"
          label="更新时间"
          width="160px"
          align="center"
        >
          <template slot-scope="scope">
            {{ $formatDate(scope.row.updateTime) }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="status" label="状态" width="80px" align="center">
          <template slot-scope="scope"> -->
            <!-- <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="2"
              @change="sysUserStatusChange(scope.row)"
            >
            </el-switch> -->
          <!-- </template> -->


          <!-- <template slot-scope="scope">
              <el-switch
              v-model="scope.row.status"
               :active-value="1"
               :inactive-value="2"
               @change="sysUserStatusChange(scope.row)">
              </el-switch>
          </template> -->
        <!-- </el-table-column> -->
        <el-table-column label="操作" align="center" width="150px">
          <template slot-scope="scope">
            <!-- 修改 -->
            <el-tooltip
              content="修改"
              class="item"
              effect="dark"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="primary"
                size="mini"
                @click="showEditDialog(scope.row)"
                icon="el-icon-edit"
                circle
              ></el-button>
            </el-tooltip>
            <!-- 删除 -->
            <el-tooltip
              class="item"
              effect="dark"
              placement="top"
              content="删除"
              :enterable="false"
            >
              <el-button
                type="danger"
                size="mini"
                @click="removeSysUserById(scope.row.stuId)"
                icon="el-icon-delete"
                circle
              ></el-button>
            </el-tooltip>
            <!-- 分配角色 :enterable 作用域插槽 -->
            <el-tooltip
              class="item"
              effect="dark"
              content="详细信息"
              placement="top"
              :enterable="false"
            >
              <el-button
                @click="showSysUserById(scope.row)"
                type="success"
                size="mini"
                icon="el-icon-more-outline"
                circle
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChangeFn"
        @current-change="handleCurrentChangeFn"
        :current-page.sync="q.pagenum"
        :page-sizes="[2, 3, 5, 10]"
        :page-size.sync="q.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize"
      >
      </el-pagination>

      <!-- 添加用户的对话框 -->
      <el-dialog
        title="添加用户"
        :visible.sync="dialogVisible"
        @close="addDialogClose"
        width="40%"
      >
        <!--添加 内容主题区域 ------------------------------------------------------------------------------------------------------------>
        <el-form
          :model="addForm"
          :rules="addFormRules"
          ref="addFormRef"
          label-width="100px"
        >
          <el-form-item label="学生姓名" prop="stuName">
            <el-input v-model="addForm.stuName"></el-input>
          </el-form-item>
          <el-form-item label="学生学号" prop="stuNum">
            <el-input v-model="addForm.stuNum" maxlength="11"></el-input>
          </el-form-item>
          <el-form-item label="学生年龄" prop="stuAge">
            <el-input v-model="addForm.stuAge"></el-input>
          </el-form-item>
          <el-form-item label="用户密码" prop="stuPassword">
            <el-input
              type="password"
              v-model="addForm.stuPassword"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input
              type="password"
              v-model="addForm.checkPass"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="电话号码" prop="stuPhone">
            <el-input v-model="addForm.stuPhone" maxlength="11"></el-input>
          </el-form-item>
          <el-form-item label="所在校区" prop="stuAddress">
            <el-select
              v-model="addForm.stuAddress"
              placeholder="请选择所在校区"
            >
              <el-option label="自贡校区" value="自贡校区"></el-option>
              <el-option label="宜宾校区" value="宜宾校区"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择年级" prop="stuGrade">
            <el-select v-model="addForm.stuGrade" placeholder="请选择年级">
              <el-option label="2020" value="2020"></el-option>
              <el-option label="2021" value="2021"></el-option>
              <el-option label="2022" value="2022"></el-option>
              <el-option label="2023" value="2023"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择专业" prop="stuGrade">
            <el-select v-model="addForm.stuMajor" placeholder="请选择专业">
              <el-option label="软件工程" value="软件工程"></el-option>
              <el-option label="网络工程" value="网络工程"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择性别" prop="stuSex">
            <el-radio-group v-model="addForm.stuSex">
              <el-radio label="1">男</el-radio>
              <el-radio label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="自我危险程度"
            prop="stuSelfcrisis"
            label-width="120px"
            style="margin-left: -20px"
          >
            <el-radio-group v-model="addForm.stuSelfcrisis">
              <el-radio label="危机">危机</el-radio>
              <el-radio label="轻微">轻微</el-radio>
              <el-radio label="良好">良好</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <!-- 底部区域 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitSysUser">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 修改用户的对话框 -->
      <el-dialog
        title="修改用户"
        :visible.sync="editDialogVisible"
        @close="editDialogClose"
        width="40%"
      >
        <!-- 内容主题区域 -->
        <el-form
          :model="editForm"
          :rules="editFormRules"
          ref="editFormRef"
          label-width="100px"
        >
          <el-form-item label="学生姓名" prop="stuName">
            <el-input v-model="editForm.stuName"></el-input>
          </el-form-item>
          <el-form-item label="学生学号" prop="stuNum">
            <el-input v-model="editForm.stuNum" maxlength="11"></el-input>
          </el-form-item>
          <el-form-item label="学生年龄" prop="stuAge">
            <el-input v-model="editForm.stuAge"></el-input>
          </el-form-item>
          <el-form-item label="用户密码" prop="stuPassword">
            <el-input type="password" v-model="editForm.stuPassword"></el-input>
          </el-form-item>

          <el-form-item label="电话号码" prop="stuPhone">
            <el-input v-model="editForm.stuPhone" maxlength="11"></el-input>
          </el-form-item>
          <el-form-item label="所在校区" prop="stuAddress">
            <el-select
              v-model="editForm.stuAddress"
              placeholder="请选择所在校区"
            >
              <el-option label="自贡校区" value="自贡校区"></el-option>
              <el-option label="宜宾校区" value="宜宾校区"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择年级" prop="stuGrade">
            <el-select v-model="editForm.stuGrade" placeholder="请选择年级">
              <el-option label="2020" value="2020"></el-option>
              <el-option label="2021" value="2021"></el-option>
              <el-option label="2022" value="2022"></el-option>
              <el-option label="2023" value="2023"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择专业" prop="stuGrade">
            <el-select v-model="editForm.stuMajor" placeholder="请选择专业">
              <el-option label="软件工程" value="软件工程"></el-option>
              <el-option label="网络工程" value="网络工程"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择性别" prop="stuSex">
            <el-radio-group v-model="editForm.stuSex">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="自我危险程度"
            prop="stuSelfcrisis"
            label-width="120px"
            style="margin-left: -20px"
          >
            <el-radio-group v-model="editForm.stuSelfcrisis">
              <el-radio label="危机">危机</el-radio>
              <el-radio label="轻微">轻微</el-radio>
              <el-radio label="良好">良好</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <!-- 底部区域 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitEditSysUser">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  getuser,
  inituser,
  edituser,
  deleteStudents,
  addSysUserApI,
  delteStuById,
  findStudentBy,
} from "@/api/Student/index";
// import { inituser } from '@/api/index'
export default {
  name: "Lo_",
  components: {
    // BRED: () => import('../../../components/a/a.vue')
  },
  data() {
    // 验证密码
    const valipwd = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.addForm.checkPass !== "") {
          this.$refs.addFormRef.validateField("checkPass");
        }
        callback();
      }
    };
    // 验证确认密码
    const valirepwd = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.addForm.stuPassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      relation: "",
      Distribution: [
        {
          id: 1,
          title: "管理员1",
        },
        {
          id: 2,
          title: "管理员2",
        },
        {
          id: 3,
          title: "管理员3",
        },
      ],
      labelPosition: "right",
      stuSex: "",
      formLabelAlign: {
        stuId: "",
        stuNum: "",
        stuName: "",
        stuAge: "",
        stuSex: "",
        stuAddress: "",
        stuMajor: "",
        stuGrade: "",
        stuPhone: "",
        stuPassword: "",
        stuSelfcrisis: "",
        createTime: "",
        updateTime: "",
      },
      select: "",
      drowStatus: [
        { lable: "删除", value: 1 },
        { lable: "冻结", value: 2 },
      ],

      // 默认的条件
      q: {
        pagenum: 1,
        pagesize: 2,
        cate: "1",
        state: "1",
      },
      sysUserList: [],
      ids: [],
      totalSize: 5,
      // 对话框
      dialogVisible: false,
      // 添加用户表单数据
      addForm: {
        stuNum: "",
        stuName: "",
        stuAge: "",
        stuSex: "",
        stuAddress: "",
        stuMajor: "",
        stuGrade: "",
        stuPhone: "",
        stuPassword: "",
        stuSelfcrisis: "",
      
      },
      // 用户表单验证规则
      addFormRules: {
        stuPhone: [
          {
            pattern:
              /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            message: "电话号码格式不对",
            trigger: "blur",
          },
          { required: true, message: "请输入电话号码", trigger: "blur" },
        ],
        stuName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 15,
            message: "用户名称长度在 2 到 15 个字符",
            trigger: "blur",
          },
        ],
        stuPassword: [{ required: true, validator: valipwd, trigger: "blur" }],
        checkPass: [{ required: true, validator: valirepwd, trigger: "blur" }],
        stuAddress: [
          { required: true, message: "请选择校区", trigger: "change" },
        ],
        stuMajor: [
          { required: true, message: "请选择专业", trigger: "change" },
        ],
        stuGrade: [
          { required: true, message: "请选择年级", trigger: "change" },
        ],
        stuSelfcrisis: [
          { required: true, message: "请选择自我危险程度", trigger: "change" },
        ],
        stuAge: [
          {
            pattern: /^(?:[1-9][0-9]?|1[01][0-9]|120)$/,
            message: "年龄无效",
            trigger: "blur",
          },
          { required: true, message: "请输入年龄", trigger: "blur" },
        ],
        stuNum: [
          { required: true, message: "请输入学号", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "学号长度应为11位",
            trigger: "blur",
          },
        ],
      },
      editid: [],
      // 控制修改对话框演示与隐藏
      editDialogVisible: false,
      UserInfodialogTableVisible: false,
      DistributeTableVisible: false,
      // 定义只负责接收编辑查询信息
      editForm: {
        stuNum: "",
        stuName: "",
        stuAge: "",
        stuSex: "",
        stuAddress: "",
        stuMajor: "",
        stuGrade: "",
        stuPhone: "",
        stuPassword: "",
        stuSelfcrisis: "",
      },
      updataUser: {},
      re: true,
      // 用户表单验证规则
      editFormRules: {
        stuPhone: [
          {
            pattern:
              /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            message: "电话号码格式不对",
            trigger: "blur",
          },
          { required: true, message: "请输入电话号码", trigger: "blur" },
        ],
        stuName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 15,
            message: "用户名称长度在 2 到 15 个字符",
            trigger: "blur",
          },
        ],
        stuPassword: [{ required: true, trigger: "blur" }],

        stuAddress: [
          { required: true, message: "请选择校区", trigger: "change" },
        ],
        stuMajor: [
          { required: true, message: "请选择专业", trigger: "change" },
        ],
        stuGrade: [
          { required: true, message: "请选择年级", trigger: "change" },
        ],
        stuSelfcrisis: [
          { required: true, message: "请选择自我危险程度", trigger: "change" },
        ],
        stuAge: [
          {
            pattern: /^(?:[1-9][0-9]?|1[01][0-9]|120)$/,
            message: "年龄无效",
            trigger: "blur",
          },
          { required: true, message: "请输入年龄", trigger: "blur" },
        ],
        stuNum: [
          { required: true, message: "请输入学号", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "学号长度应为11位",
            trigger: "blur",
          },
        ],
      },
    };
  },
  //  watch:{
  //       editForm:{
  //           handler:function(newV,oldV){
  //             console.log("6666666666",oldV)
  //             console.log("6666666666",newV.stuPassword)
  //           },
  //           deep:true
  //       }
  //   },
  computed: {
    adminNum() {
      return this.$store.state.adminInfo.adminNum || [];
    },
    adminName() {
      return this.$store.state.adminInfo.adminName || [];
    },
    adminId() {
      return this.$store.state.adminInfo.adminId || [];
    },
  },
  mounted() {
    const url = window.location.href;
    this.getSysUserList();
    this.initArticleList();
    try {
      // this.select = url.split('?')[1].split('=')[1]
      console.log("adwawd");
      // this.SelectUser();
      this.initArticleList();
    } catch (error) {
      // console.log('dwadawdwadwaadwaadwaadwaadwaadwaadwa')
      this.initArticleList();
    }
    // if (url.split('?')[1] !== null || url.split('?')[1] !== '') {
    //   console.log('adwawd')
    //   this.select = url.split('?')[1].split('=')[1]
    //   this.SelectUser()
    // } else {
    //   console.log('dwadawdwadwaadwaadwaadwaadwaadwaadwa')
    //   this.getSysUserList()
    //   this.initArticleList()
    // }
  },
  methods: {
    // 刷新
    refresh() {
      // location.href = 'http://localhost:8080/#/sysuser'
      this.select = "";
      this.initArticleList();
    },
    // 拿到角色勾选的值
    handle() {},
    Distribute() {
      this.DistributeTableVisible = true;
    },
    // 角色分配
    fengPei(val) {
      console.log(val.map((item) => item.id));
    },
    onSubmitDistribute() {
      console.log(this.relation);
      this.DistributeTableVisible = false;
    },
    // 展示用户详细信息
    showSysUserById(e) {
      this.UserInfodialogTableVisible = true;
      if (this.formLabelAlign.stuSex == 0) {
        this.stuSex = "男";
      } else {
        this.stuSex = "女";
      }
      this.formLabelAlign = e;
      this.formLabelAlign.createTime = this.$formatDate(
        this.formLabelAlign.createTime
      );
      this.formLabelAlign.updateTime = this.$formatDate(
        this.formLabelAlign.updateTime
      );
      console.log("123", e);
    },
    // 查询
    async SelectUser() {
      console.log('se',this.select)
      const res = await findStudentBy(this.select)
      if (res.data.code === 0) {
        console.log("231312",res.data.data)
        this.sysUserList= []
        this.sysUserList=res.data.data
        this.totalSize=res.data.data.length
        console.log("222",this.sysUserList)
      } else {
        this.$message.error('查询失败！！！')
      }
    },
    // 禁用id1
    selectable(row, index) {
      if (row.id === 1) {
        return false;
      } else {
        return true;
      }
    },
    geteditname(a, b) {
      // console.log('123', a, b)
    },
    async getSysUserList() {
      const { data: res } = await getuser();
      console.log(res.data);
      if (res.code !== 0) {
        this.$message.error("无法获取用户数据列表");
      } else {
        // res.data.forEach((element, index) => {
        //   console.log(index, element)
        //   if (index < res.data.length - 1) {
        //     this.sysUserList[index] = element
        //   }
        // })
        this.totalSize = res.data.length;
        // this.sysUserList = [];
        // this.sysUserList = res.data;
        // console.log("用户列表", this.sysUserList);
        this.totalSize = res.data.length;
      }
    },
    // 更新分页,信息
    async initArticleList() {
      this.select = "";
      const pagenum = this.q.pagenum - 1;
      const result = await inituser(pagenum * this.q.pagesize, this.q.pagesize);
      if (result.data.code === 0) {
        console.log("this", result.data.data);
        this.sysUserList = result.data.data;
        // this.totalSize = result.data.data.length
        // this.resetListFn()
        console.log("123", result.data.data);
      }
    },
    handleSizeChangeFn(e) {
      this.pagesize = e;
      this.q.pagenum = 1;
      this.initArticleList();
      // this.resetListFn()
    },
    handleCurrentChangeFn(e) {
      this.pagenum = e;
      this.initArticleList();
      // this.resetListFn()
    },
    // 重置
    resetListFn(forname) {
      this.q = {
        pagenum: 1,
        pagesize: 2,
        cate_id: "",
        state: "",
      };
      // 必须要有rule ref prop
      // this.$refs.pubFormRef.resetFields()
      this.initArticleList();
    },
    // 监听switch开关状态的改变
    async sysUserStatusChange(sysUserInfo) {
      // console.log(sysUserInfo)
      // const res = await updateSysUserStatus(sysUserInfo.id, sysUserInfo.status)
      // if (res.data.code === 0) {
      //   this.$message.success('更新成功')
      //   this.getSysUserList()
      //   this.initArticleList()
      // } else {
      //   this.$message.error('更新失败')
      // }
      // console.log(res)
    },
    // 监听添加用户关闭对话框的事件
    addDialogClose() {
      this.$refs.addFormRef.resetFields();
    },
    // 提交添加用户
    submitSysUser() {
      console.log("add", this.addForm);
      const {
        stuNum,
        stuName,
        stuAge,
        stuSex,
        stuAddress,
        stuMajor,
        stuGrade,
        stuPhone,
        stuPassword,
        stuSelfcrisis,
     
      } = this.addForm;
      this.$refs.addFormRef.validate(async (valid) => {
        if (valid) {
          // 发起真正的提交
          const { data: res } = await addSysUserApI(
            stuNum,
            stuName,
            stuAge,
            stuSex,
            stuAddress,
            stuMajor,
            stuGrade,
            stuPhone,
            stuPassword,
            stuSelfcrisis,
            this.adminId,
            this.adminNum
          );
          console.log("ssssex", this.addForm.stuSex);
          console.log(res);
          if (res.code == 0 && res.status == true) {
            console.log('6666',this.adminId,this.adminNum)
            console.log(res);
            this.$message.success("添加学生成功");
            // 隐藏添加对话框
            this.dialogVisible = false;
            // 重新获取用户列表
            this.initArticleList();
          } else {
            this.$message.error(res.message);
            this.initArticleList();
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 展示编辑用户的对话框
    showEditDialog(a) {
      //   const { data: res } = await this.$http.get('/system/sys_user/findSysUserById', { params: { id: id } })
      //   if (res.code !== 200) {
      //     this.$message.error('查询用户失败')
      //   } else {
      //     // 保存到查询到的用户信息对象
      //     this.editForm = res.data
      //     console.log(this.editForm)
      //   }

      this.editForm = a;
      // console.log("edit",a)
      this.editDialogVisible = true;
    },
    // 监听编辑用户关闭对话框的事件
    editDialogClose() {
      // this.updataUser = this.editForm
      // console.log('dep', this.editForm.deptId)
      // console.log('email', this.editForm.email)
      // console.log('id', this.editForm.id)
      // console.log('ph', this.editForm.phone)
      // console.log('sex', this.editForm.sex)
      // console.log('loginName', this.editForm.loginName)
      // console.log(this.editForm)
      // this.$refs.editFormRef.resetFields()
    },
    // 提交编辑用户
    submitEditSysUser() {
      this.$refs.editFormRef.validate(async (valid) => {
        if (valid) {
          // 发起真正的提交
          // deptId, email, id, phone, sex
          const {
            adminId,
            adminNum,
            stuId,
            stuNum,
            stuName,
            stuAge,
            stuSex,
            stuAddress,
            stuMajor,
            stuGrade,
            stuPhone,
            stuPassword,
            stuSelfcrisis,
            stuHead
          } = this.editForm;
          // console.log("ed", deptId, email, id, phone);
          const { data: res } = await edituser(
          adminId,
            adminNum,
            stuId,
            stuNum,
            stuName,
            stuAge,
            stuSex,
            stuAddress,
            stuMajor,
            stuGrade,
            stuPhone,
            stuPassword,
            stuSelfcrisis,
            stuHead
          );
          console.log(res);
          if (res.code !== 0) {
            // console.log(res)
            console.log('firstaaaaaaa', this.editForm)
            this.$message.error("修改用户失败");
          } else {
            console.log("修改用户111", res);
            // 隐藏添加对话框
            this.editDialogVisible = false;
            // 重新获取用户列表
            console.log('last', this.editForm)
                this.getSysUserList();
            this.initArticleList();
        
            this.$message.success("修改用户成功");
          }
        } else {
          this.$message.error("修改信息失败");
          return false;
        }
      });
    },
    // 删除
    async removeSysUserById(stuId) {
      console.log('我是删除id', stuId)
      // 确认提示框
      const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // 用户确认删除，返回字符串 confirm
      // 用户取消删除，返回字符串 cancel
      if (confirmResult !== 'confirm') {
        this.$message.info('已取消删除')
      } else {
        // 确认删除
        console.log("1111111",stuId)
        const { data: res } = await delteStuById(stuId)
        console.log('123', res)
        if (res.code !== 0) {
          this.$message.error('删除用户失败')
        } else {
          // 隐藏添加对话框
          this.editDialogVisible = false
          // 重新获取用户列表
          this.$message.success('删除用户成功')
          this.initArticleList()
        }
      }
    },
    ree(a) {
      // console.log(123123)
      // if (this.re) {
      //   this.editid = this.editid.filter((num) => {
      //     console.log('2222222', this.$refs.multipleTable.selection.id)
      //     return num !== this.$refs.multipleTable.selection.id
      //   })
      //   console.log('111111', this.editid)
      // }
    },

    toggleSelection(rows) {
      //   if (rows) {
      //     rows.forEach((row) => {
      //       this.$refs.multipleTable.toggleRowSelection(row)
      //     })
      //   } else {
      //     this.$refs.multipleTable.clearSelection()
      //   }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log('22', val)
    },
    onTableSelect(rows, row) {
      // console.log('1', rows, row)
      // const selected = rows.length && rows.indexOf(row) !== -1
      // console.log('se', selected)
    }, // true就是选中，0或者false是取消选中 } } }
    dropdown(a) {
      const arr = this.multipleSelection;
      // console.log(this.editid)
      if (arr.length > 0) {
        arr.forEach((item) => {
          // console.log('b', item.id)
          this.editid.push(item.stuId);
        });
      } else {
        alert("请选择");
      }
      // const uniqueArr = this.ids.filter((item, index) => {
      //   return this.ids.indexOf(item) === index
      // })
      // this.ids = uniqueArr
      // 0启用,1是冻结
      if (a.lable === "删除") {
        // console.log('1111', a.value)
        this.updateSysUser(this.editid, a.value);
        // console.log('321', this.editid)
        this.editid = [];
        // console.log('123', this.editid)
      } else if (a.lable === "冻结") {
        // console.log(a.value)
        this.updateSysUser(this.editid, a.value);
        this.editid = [];
        console.log("冻结");
      }
    },
    async updateSysUser(id) {
      console.log("222222222",id)
      const res = await deleteStudents(id)
      if (res.data.code === 0) {
        this.initArticleList()
        this.$message.success('修改成功')
      } else {
        this.$message.error('修改失败')}}
  },
}
</script>

<style>
.box-card {
  margin-top: 10px;
}
.el-table {
  margin-top: 10px;
}
.el-pagination {
  margin-top: 10px;
  margin-left: 290px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.dropdown {
  background: #409eff;
  opacity: 0.2;
}
.left {
  margin-left: 120px;
  width: 500px;
  height: 900px;
}
</style>
